html, body {
    /* 这样设置后，子对象才可使用相对高度 */
    height:100%;
}
#layout {
    /* 居中 */
    margin:0px auto;
    /* 宽度 */
    width:98%;
    /* 高度 */
    height:100%;
    border-left:1px solid;
    border-right:1px solid;
}
#header {
    /* 高度 */
    height:10%;
    /* 子对象有绝对定位 */
    position:relative;
    background-image:url(../image/hf-bg-1920.jpg);
}
#menu {
    /* 向左浮动 */
    float:left;
    /* 宽度 */
    width:12%;
    /* 高度 */
    height:87%;
    background-color:#99ccff;
}
#content {
    /* 向左浮动 */
    float:left; 
    /* 宽度 */
    width:88%;
    /* 高度 */
    height:87%;
    background-color:#99ccff;
}
#footer {
    /* 清除浮动 */
    clear:left;
    height:3%;
    background-image:url(../image/hf-bg-1920.jpg);
    /* 背景图片位置 */
    background-position:bottom;
    /* 子对象有绝对定位 */
    position:relative;
}
#menu ul {
    height:100%;
    margin:0px;
    padding:0px;
    border-right:1px ridge;
}
#menu li {
    list-style:none;
    padding:2px;
    border-bottom:1px ridge;
}
#menu li a {
    display:block;
    text-decoration:none;
}
#menu li:hover {
    background-color:#488ecb;
}